import React,{useState,useEffect,useRef} from 'react';
import {connect} from 'react-redux'
import {  Modal, Form, Input, Switch, } from 'antd';
import UploadImg from '../../../components/Upload'
const CateDia = (props) => {
    const {detailInfo,isModalVisible,newClassity}=props;
    const [newImg,setImg]=useState('')
    const [isDisabled,setIsDisabled]=useState('')
    const formRef=useRef()
    console.log(detailInfo,'detailInfo')
    useEffect(()=>{
        // formRef.current
        if(formRef.current){
            formRef.current.setFieldsValue(detailInfo)
            console.log(detailInfo,'detailinfo')
            console.log(formRef.current.getFieldsValue(),'formRef')
        }
    },[detailInfo])

    const handleCancel=()=>{ //取消
        const {cancel}=props
        cancel()
    }
    const handleCreate=()=>{  //确定
        
       if(detailInfo.diatype==='编辑'){//编辑
            console.log(formRef.current.getFieldsValue(),'formRef')

            props.dispatch({
                type:'edmit_classify',
                payload:{
                    ...formRef.current.getFieldsValue(),
                    classifyIcon:newImg,
                    isDisabled: isDisabled? isDisabled:formRef.current.getFieldsValue().isDisabledt,
                    id:detailInfo.id
                }
                
            })
        }else if(detailInfo.diatype==='添加'){//添加子目录
            console.log(222)
            props.dispatch({
                type:'add_classify',
                payload:{
                    ...formRef.current.getFieldsValue(),
                    isDisabled: isDisabled?isDisabled:'隐藏',
                    classifyIcon:newImg,
                    }
            })
        }else{//新增
            console.log(333)
            props.dispatch({
                type:'add_classify',
                payload:{
                    ...formRef.current.getFieldsValue(),
                    isDisabled: isDisabled?isDisabled:'隐藏',
                    classifyIcon:newImg,
                    }
                
            })
        }
        const {cancel,confirm}=props
        
        confirm()
    }

    const handleDisabled=(bool,e)=>{ //状态
        console.log(bool,e,'bool,e')
        let newis=''
        if(bool){
            newis='显示'
        }else{
            newis='隐藏'
        }
        console.log( newis,'newis')
        setIsDisabled(newis)
    } 
    const handleIcon=(val)=>{  //图标
        console.log(val.response&&val.response.imgUrl,'newimg')
        const url=val.response&&val.response.imgUrl
        setImg(url)
    }

    // console.log(Object.keys(detailInfo).length&&detailInfo.isDisabled==='显示','isdialog')
    // console.log(detailInfo.classifyIcon?detailInfo.classifyIcon:'11','img')
    // console.log(detailInfo,'detailInfo')
    return (
        <div>
             <Modal title={Object.keys(detailInfo).length?detailInfo.diatype==='编辑'?'编辑':'添加子目录':'新增'}
                visible={isModalVisible}
                onOk={handleCreate}
                okText='确认'
                cancelText='取消'
                onCancel={handleCancel}>
                 <Form
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 14 }}
                ref={formRef}
                autoComplete="off"
                >
                    <Form.Item
                        label="分类名称"
                        name="title"
                        rules={[{ required: true, message: '分类名称不能为空' }]}
                    >
                         <Input/>
                    </Form.Item>
                    <Form.Item
                        label="分类code码"
                        name="code"
                        rules={[{ required: true, message: '分类code码不能为空' }]}
                    >
                    <Input/>
                        {/* <Input value={detailInfo.parentcode} onChange={handleParent}/> */}
                    </Form.Item>
                    <Form.Item
                        label="父级code码"
                        name="parentcode"
                        rules={[{ required: true, message: '父级code码不能为空' }]}
                    >
                    <Input/>
                        {/* <Input value={detailInfo.parentcode} onChange={handleParent}/> */}
                    </Form.Item>
                    <Form.Item
                        label="分类等级"
                        name="level"
                        rules={[{ required: true, message: '分类等级不能为空' }]}
                    >
                        {/* <Input value={detailInfo.level} onChange={handleLevel}/> */}
                        <Input/>
                    </Form.Item>
                    {
                        // console.log(detailInfo.classifyIcon, '0000')
                    }
                    <Form.Item
                        label="分类图标"
                    >
                        <UploadImg  url={detailInfo?detailInfo.classifyIcon:''} flag={false} content={handleIcon}/>
                    </Form.Item>
                    {/* <Form.Item
                        label="状态"
                        name="isDisabled"
                        valuePropName={detailInfo.isDisabled === '显示'}
                    >
                        <Switch size='small'
                            checkedChildren={'显示'}
                            unCheckedChildren={'隐藏'}
                            defaultChecked={detailInfo.isDisabled?1:0}
                            onChange={handleDisabled}
                        />
                    </Form.Item> */}
                </Form> 
            </Modal>
        </div>
    );
}

export default connect((state)=>{
    return {
        newClassity:state.newClassity
    }
})(CateDia) ;
